<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width = device-width,user-scalable = no">
	<title>Document</title>
	<script src="MTween.js"></script>
	<script src="mScroll.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		header {
			height: 40px;
			font-size: 20px;
			line-height: 40px;
			text-align: center;
			color: #fff;
			background: #000;
		}
		footer {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 40px;
			font-size: 20px;
			line-height: 40px;
			text-align: center;
			color: #fff;
			background: #000;
		}
		#wrap {
			position: absolute;
			top:40px;
			right: 0;
			left: 0;
			bottom: 40px;
		}
		#list {
			overflow: hidden;
		}
		#list li{
			list-style-type: none;
			line-height: 30px;
			text-indent: 20px;
			font-size: 16px;
			border-bottom: 1px solid #000;
		}
	</style>
</head>
<body>
	<header id="header">课堂</header>
	<section id="wrap">
		<ul id="list"></ul>
	</section>
	<footer id="footer">底部</footer>

	<script>
		document.addEventListener('touchstart',function(e){
			e.preventDefault();
		},{ passive: false });
		function cretaeList(){
			var list = document.getElementById('list');
			var inner = '';
			for(var i=0;i<100;i++){
				inner += '<li>这是第' + i + '个</li>';
			}
			list.innerHTML = inner;
		}

		cretaeList();
		var wrap = document.getElementById('wrap');
		mScroll({el : wrap});
	</script>
</body>
</html>